<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

        .bigbox {
            width: 100%;
            height: 100%;
            /* background-color: aqua; */
        }

        .boxleft {
            width: 60%;
            height: 100%;
            /* background-color: blue; */
            float: left;
            margin-left: 60px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            box-shadow: -5px 2px 12px gray;
        }

        .boxleft .smallbox {
            border: 1px solid gray;
            width: 23%;
            height: 50%;
        }

        .boxleft .smallbox p {
            margin-left: 20px;
        }

        .boxleft .smallbox img {
            width: 100%;
        }

        .boxleft .smallbox button {
            background-color: red;
            height: 20px;
            width: 80px;
            margin-left: 12px;
            color: white;
            font-size: 13px;
            text-align: center;
        }

        .boxright {
            width: 30%;
            height: 100%;
            /* background-color: pink; */
            float: right;
            box-shadow: -5px 2px 12px rgb(29, 29, 29);
            position: relative;
        }

        .boxright h4 {
            margin-top: 20px;
            margin-left: 10px;
        }
        .boxright .liebiao {
            width: 100%;
            height: 100%;
        }

        .boxright .one {
            width: 100%;
            height: 100px;
            /* border: 1px solid black; */
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
        }

        .boxright .one .goods {
            height: 100%;
            width: 140px;
            /* background-color: aqua; */
            text-align: center;
        }

        .boxright .one .goods img {
            width: 55%;
            height: 75%;
        }

        .boxright input {
            margin-top: 5px;
        }

        .boxright .money {
            line-height: 100px;
        }
        .boxright .add{
            height: 15px;
            width: 15px;
            border-radius: 50%;
            text-align: center;
            background-color: rgba(128, 128, 128, 0.358);
            margin-top: 42px;
            line-height: 15px;
        }
        .boxright .minus{
            height: 15px;
            width: 15px;
            border-radius: 50%;
            text-align: center;
            background-color: rgba(128, 128, 128, 0.358);
            margin-top: 42px;
            line-height: 15px;
        }
        .boxright .amount {
            line-height: 100px;
        }

        .boxright .delete {
            line-height: 100px;
        }
        .boxright .shuliang{
            height: 44px;
            width: 154px;
            /* background-color: aqua; */
            font-size: 18px;
            font-weight: 700;
            text-align: center;
            position: absolute;
            bottom: 20px;
            left: 0px;
        }
        .boxright .sum{
            height: 44px;
            width: 154px;
            /* background-color: aqua; */
            color: red;
            font-style: italic;
            font-size: 24px;
            text-align: center;
            position: absolute;
            bottom: 30px;
            right: 0px;
        }
    </style>
</body>
<div class="bigbox">
    <div class="boxleft">
    </div>
    <div class="boxright">
        <h4>购物车</h4>
        <div class="liebiao">
            <div class="one">
           
        </div>
    </div>
</div>

</html>
<script>
    var goodlist = [
            { img:'./image/1.png', name:'高级办公椅',money:'1000', count:0},
            { img:'./image/2.png', name:'高级按摩椅',money:'1000',count:0 },
            { img:'./image/3.png', name:'高级电动按摩椅',money:'10000', count:0},
            { img:'./image/4.png', name:'电动按摩椅',money:'20000', count:0},
            { img:'./image/5.png', name:'老板椅',money:'50000', count:0},
            { img:'./image/6.png', name:'办公桌',money:'2000', count:0},
            { img:'./image/7.png', name:'可升降办公椅',money:'5000',count:0 },
            { img:'./image/8.png', name:'可升降办公桌',money:'4000', count:0 },
        ]
    //购物车数据
    var gouwuche={ list:[] }
    //获取加减号
    var add=document.querySelector('.add')
    var count=1
//    //获取商品数
//     var countall=document.querySelectorAll('.count')
   //获取总价
    var sum=document.querySelector('.sum')
   //获取删除按钮
    var Delete=document.querySelector('.delete')
    function render(){
        //获取商品列表数据
        var list=document.querySelector('.boxleft')
        list.innerHTML=goodlist.map((item)=>{
            return `<div class="smallbox">
                    <img src="${item.img}"/>
                    <p>${item.name}</p>
                    <p>${item.money}</p>
                    <button>加入购物车</button>
                    </div>`
        }).join('')
    }
    render()
    function renderGouwuche(){
            var liebiao = document.querySelector('.liebiao');  
            liebiao.innerHTML = gouwuche.list.map((item)=>{
                return ` <div class="one">
                    <input type="checkbox">
                <div class="goods">
                    <img src="${item.img}"/>
                    <p class="name">${item.name}</p>
                </div>
                <p class="money">${item.money}</p>
                <div class="add">+</div>
                <div class="minus">-</div>
                <div class="delete">删除收藏</div>
                <div class="shuliang">商品数${item.count}</div>
                <div class="sum">￥${item.Settlement}</div>
                </div>
                </div>`
            }).join('')
        }
    var list = document.querySelector('.boxleft');
        list.onclick = function(e){
            count++
            if( e.target.tagName == 'BUTTON' ){
                    var btns = [...document.querySelectorAll('button')]
                    var index = btns.findIndex((item)=>{
                    return item == e.target;  
                }) 
                gouwuche.list.push( goodlist[index] );
                renderGouwuche()
            }  
        } 
    
                //     if(goodlist.list.indexOf(gouwuche[index])==(-1)){
                //     gouwuche.list.push(goodlist[index])
                //     renderGouwuche()
                //      }
</script> 